<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/dataTables.bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrapValidator.min.css}" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>


<main class="container-fluid">
    <table class="table table-bordered">
        <tbody>
        <tr>
            <td>举报对象：</td>
            <td colspan="2" th:text="${report.titleName}"></td>
        </tr>
        <tr>
            <td>举报内容：</td>
            <td colspan="2" th:text="${report.content}"></td>
        </tr>
        <tr>
            <td th:text="'联系方式：'+${report.phone}"></td>
            <td th:text="'举报时间：'+${#dates.format(report.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
            <td th:text="'核审时间：'+${report.updateTime!=null?#dates.format(report.updateTime,'yyyy-MM-dd HH:mm:ss'):'未核审'}"></td>
        </tr>
        <tr>
            <td colspan="3">图片：</td>
        </tr>
        <tr>
            <td colspan="3">
                <img th:each="pic:${pictures}" th:src="${pic}" alt="" style="width: 100%;margin-bottom: 10px">
            </td>
        </tr>
        <tr>
            <td colspan="3">视频：</td>
        </tr>
        <tr>
            <td colspan="3">
                <video controls th:each="video:${videos}" th:src="${video}" style="width: 100%;margin-bottom: 10px"></video>
            </td>
        </tr>
        <tr th:if="${report.status==0}">
            <td colspan="3">
                <button class="btn btn-primary" onclick="allow(1)">审核通过</button>
                <button class="btn btn-danger" onclick="allow(-1)">驳回举报</button>
            </td>
        </tr>
        </tbody>
    </table>
</main>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script th:src="@{/js/layer.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/bootstrapValidator.js}"></script>
<script th:src="@{/js/language/zh_CN.js}"></script>
<script th:src="@{/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/js/dataTables.bootstrap.min.js}"></script>
<script th:src="@{/js/jquery.spring-friendly.min.js}"></script>

<script>
    var allow = function (action) {
        var tips;
        if(action===1){
            tips="确认通过审核？"
        }else {
            tips="确认驳回举报？"
        }
        layer.confirm(tips, {
            btn: ['确认', '取消'] //按钮
        }, function () {
            $.ajax({
                type: 'post',
                data:{
                    action:action
                },
                url: '/admin/api/report/' + [[${report.id}]],
                success: function (result) {
                    layer.alert(result.msg, function (index) {
                        layer.close(index)
                        parent.location.reload()
                    })
                }
            });
        })
    };

</script>
<script>
</script>
</body>
</html>
